import {View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import {store} from "../../store/store";
import './selectList.scss';
import {request} from "../../utils";

class SelectList extends Taro.Component {
    static options = {
        addGlobalClass: true
    }
    config = {
        component: true,
        componentGenerics: {
            Prompt: false
        }
    };

    state = {
        classDate: '',
        openStatus: 0,  //切换状态
        selectWrap: [], //类别选择存储
    };

    componentWillMount() {
        const {getClassDate, onTimers} = this.props;
        if (onTimers && onTimers.length != 0) { //教室选择时间
            this.setState({
                classDate: getClassDate || store.getState().setClassDate,
                selectWrap: onTimers
            })
        } else {
            this.setState({
                classDate: getClassDate || store.getState().setClassDate,
                selectWrap: store.getState().getData.weekDays
            })
        }
    }

    componentWillReceiveProps = (nextProps) => {
        const {getClassDate} = this.props;
        if ((nextProps.getClassDate && getClassDate !== nextProps.getClassDate)) {
            if (nextProps.onTimers && nextProps.onTimers.length != 0) { //教室选择时间
                this.setState({
                    classDate: nextProps.getClassDate,
                    selectWrap: nextProps.onTimers
                })
            } else {
                this.setState({
                    classDate: nextProps.getClassDate,
                })
            }
        }
    };

    //转换
    switchStatus = (num, time) => {
       this.setState({
           openStatus: num,
           classDate: time,
       }, () => {
           this.props.onTimer(time, num);
       })
    };

    render() {
        const {selectWrap, openStatus, classDate} = this.state;
        const {onTimers} = this.props;
        return (
            <View className="List-head">
                {selectWrap && selectWrap.map((item, index) => (
                    <View className={`List-item flex-center ${((classDate == item.classDate || classDate == item.dayOfWeekName)) ? 'List-item-blod' : ''}`} onClick={this.switchStatus.bind(this, onTimers ? item.dayOfWeekValue : index, onTimers ? item.dayOfWeekName : item.classDate)} key={index}>
                        <View>
                            <View className="List-item-title">{onTimers ?item.dayOfWeekName : item.classWeekDayShow}</View>
                            {!onTimers && (
                                <View className="List-item-timer">{item.classDateShow}</View>
                            )}
                        </View>
                    </View>
                ))}
            </View>
        )
    }
}

export default SelectList;

